<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="glcanvas" width="640" height="480" style="border: 1px solid #000;">
        你的浏览器似乎不支持或者禁用了HTML5 <code>&lt;canvas&gt;</code> 元素.
    </canvas>

    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.0.0/gl-matrix-min.js"></script>
    <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
        //给内置变量gl_PointSize赋值像素大小
        gl_PointSize=20.0;
        //顶点位置，位于坐标原点
        gl_Position =vec4(0.0,0.0,0.0,1.0);
        }
    </script>
    <!-- 片元着色器源码 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
        void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    </script>
    <script>
        const canvas = document.querySelector('#glcanvas');
        const gl = canvas.getContext('webgl');

        //顶点着色器源码
        var vertexShaderSource = document.getElementById('vertexShader').innerText;

        //片元着色器源码
        var fragShaderSource = document.getElementById('fragmentShader').innerText;

        //初始化着色器
        var program = initShader(gl, vertexShaderSource, fragShaderSource);
        //开始绘制，显示器显示结果
        gl.drawArrays(gl.POINTS, 0, 1);

        //声明初始化着色器函数
        function initShader(gl, vertexShaderSource, fragmentShaderSource) {
            //创建顶点着色器对象
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            //创建片元着色器对象
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            //引入顶点、片元着色器源代码
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            //编译顶点、片元着色器
            gl.compileShader(vertexShader);
            gl.compileShader(fragmentShader);

            //创建程序对象program
            var program = gl.createProgram();
            //附着顶点着色器和片元着色器到program
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            //链接program
            gl.linkProgram(program);
            //使用program
            gl.useProgram(program);
            //返回程序program对象
            return program;
        }
    </script>
</body>

</html>